<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="author" content="huaicheng151201@163.com"/>
    <meta name="keywords" content="HTML,PHP,SQL"/>
    <meta name="description" content=""/>
    <meta name="revised" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <title>甘孜</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/vision.css">
</head>
<body class="bg_hd">
    <header></header>
    <section class="section">
        <!--圣洁甘孜-->
        <div class="holy_box" style="margin-top:1rem;">
            <p>
                <span class="vision_title">
                    <img src="images/vision_icon1.png" alt="">
                    <b>圣洁甘孜</b>
                </span>
                <span class="vision_con">
                    <img src="images/vision_more.png" alt="">
                </span>
            </p>
            <ul id="holy-vr-box">
                <!-- <li >
                    <p class="holy_video">
                        <img src="images/vision_pic.png" alt="">
                        <span>
                            <b><img src="images/vision_play.png" alt=""></b>
                        </span>
                    </p>
                    <p class="holy_text">航百川西秋景</p>
                </li> -->
               
            </ul>
        </div>
        <!--全景VR-->
        <div class="VR_box">
            <p>
                <span class="vision_title">
                    <img src="images/vision_icon2.png" alt="">
                    <b>全景VR</b>
                </span>
                <span class="vision_con">
                    <img src="images/vision_more.png" alt="">
                </span>
            </p>
            <ul id="j-vr-box">
                <!-- <li onclick="javascript:window.location.href='video_details.html'">
                    <p class="holy_video">
                        <img src="images/vision_pic.png" alt="">
                        <span>
                            <b><img src="images/vision_play.png" alt=""></b>
                        </span>
                    </p>
                    <p class="holy_text">航百川西秋景</p>
                </li> -->
            </ul>
        </div>
        <!--千里眼-->
        <div class="eye_box">
            <p>
                <span class="vision_title">
                    <img src="images/vision_icon3.png" alt="">
                    <b>千里眼</b>
                </span>
                <span class="vision_con">
                    <img src="images/vision_more.png" alt="">
                </span>
            </p>
            <ul id="sen-vr-box">
                <!-- <li onclick="javascript:window.location.href='video_details.html'">
                    <p class="holy_video">
                        <img src="images/vision_pic.png" alt="">
                        <span>
                            <b><img src="images/vision_play.png" alt=""></b>
                        </span>
                    </p>
                    <p class="holy_text">航百川西秋景</p>
                </li> -->
                
                
            </ul>
        </div>
    </section>
    <script src="js/baseInfo.js"></script>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/touch.0.2.14.min.js"></script>
    <script src="js/lib/template.min.js"></script>
    <script src="js/reqeust.js"></script>
    <script>
        $(function () {
            $("header").load("header.html"); //引入共用的header
            baseInfo.pageNumber = 1; // 给当前页面的导航加上 .active

            $(".holy_box .vision_con").click(function () {
                window.location.href = 'vision_holy.html';
            });

            $(".VR_box .vision_con").click(function () {
                window.location.href = 'vision_VR.html';
            });

            $(".eye_box .vision_con").click(function () {
               window.location.href = 'vision_eye.html';
            });

            $(".holy_box ul li,.VR_box ul li,.eye_box ul li").tap(function () {
                window.location.href='video_details.html'
            });
        });
        //视频列表
        sendByUrl("/VisualInterface",{pageIndex:1,pageSiz:20},function(res){
            var HolyGanzi = res.data && res.data.HolyGanzi || [],
                Senrigan = res.data && res.data.Senrigan || [],
                vr = res.data && res.data.vr || []

            $("#j-vr-box").html(template("vr-list-temp", {
                list: vr
            }));
            $("#sen-vr-box").html(template("sen-list-temp", {
                list: Senrigan
            }));
            $("#holy-vr-box").html(template("holy-list-temp", {
                list: HolyGanzi
            }));
        });
    </script>
    <!--vr-->
    <script id="vr-list-temp" type="text/html">
        {{each list as item i}}
        {{if i < 6 }}
        <li onclick="javascript:window.location.href='video_details.html?id={{item.id}}'">
            <p class="holy_video">
                <img src="{{item.img}}" alt="{{item.title}}">
                <span>
                    <b><img src="images/vision_play.png" alt=""></b>
                </span>
            </p>
            <p class="holy_text">{{item.title}}</p>
        </li>
        {{/if}}
        {{/each}}
    </script>
    <!--sen-->
    <script id="sen-list-temp" type="text/html">
        {{each list as item i}}
        {{if i < 6}}
        <li onclick="javascript:window.location.href='video_details.html?id={{item.id}}'">
            <p class="holy_video">
                <img src="{{item.img}}" alt="{{item.title}}">
                <span>
                    <b><img src="images/vision_play.png" alt=""></b>
                </span>
            </p>
            <p class="holy_text">{{item.title}}</p>
        </li>
        {{/if}}
        {{/each}}
    </script>
    <!--HolyGanzi-->
    <script id="holy-list-temp" type="text/html">
        {{each list as item i}}
        {{if i < 6}}
        <li onclick="javascript:window.location.href='video_details.html?id={{item.id}}'">
            <p class="holy_video">
                <img src="{{item.img}}" alt="{{item.title}}">
                <span>
                    <b><img src="images/vision_play.png" alt=""></b>
                </span>
            </p>
            <p class="holy_text">{{item.title}}</p>
        </li>
        {{/if}}
       {{/each}}
    </script>
</body>
</html>